<template>
    <div class="product-container">
        <div class="properties-container">
            <div v-for="(property, index) in properties" :key="index" class="property-item">
                <span class="property-name">{{ property.name }}:</span> <span class="property-value">{{ property.value
                    }}</span>
            </div>
        </div>

        <div class="image-container">
            <div v-for="(imageUrl, index) in imageUrls" :key="index" class="image-item">
                <el-image :src="imageUrl" class="image" style="margin-bottom: 0px; margin-top: 0px" />
            </div>
        </div>
    </div>
</template>

<script setup>
import { defineProps } from 'vue';
const { imageUrls, properties } = defineProps({
    imageUrls: {
        type: Array,
        required: true
    },
    properties: {
        type: Array,
        required: true
    }
});
</script>

<style>
.product-container {
    display: flex;
    flex-direction: column;
}

.properties-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.property-item {
    width: calc(50% - 10px);
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
}

.property-name {
    color: #888;
    flex-basis: 50%; 
    white-space: normal;
}

.property-value {
    color: #000;
    flex-basis: 50%; 
    white-space: normal; 
    overflow-wrap: break-word; 
}
.image-container {
    margin-top: 20px;
}

.image-item {
    margin: 0;
    padding: 0;
    font-size: 0;
}


.image {
    width: 100%;
    height: auto;
    display: block;
    box-sizing: border-box;
}

.image-item>.image+* {

    font-size: 16px;

}
</style>